<style scoped lang="scss">
.line {
  border-bottom: 1px solid #ccc;
}

.date {
  width: 80px;
  height: 80px;
  flex-direction: column;
}

.con {
  max-width: 870px;
}

li + li {
  border-top: 1px dashed #cccccc;
}
</style>

<template>
  <div class="container">
    <default-header></default-header>
    <div>
      <img
        src="../../../assets/img/home/11310619@2x.png"
        alt=""
        style="width: 100%"
      />
    </div>
    <div class="width1080 margin0auto">
      <h1 class="tac pt40">{{ cate.name }}</h1>
      <p class="line tac fs16 color_666 mt10 pb40">
        {{ cate.abstract }}
      </p>
      <ul>
        <li v-for="data in news.data" :key="data.id" class="oh ml100 pt30 pb30">
          <div class="date fl bg_eee flex aic jcc">
            <p class="fs30">{{ data.ctime | timeFormatFilter("DD") }}</p>
            <p class="fs16">{{ data.ctime | timeFormatFilter("YYYY-MM") }}</p>
          </div>
          <div class="con fl ml30">
            <h4 class="color_333 fs16">
              <a :href="'/home/news/detail?id=' + data.id">{{ data.name }}</a>
            </h4>
            <div class="mt10 color_666 fs14">{{ data.abstract }}</div>
          </div>
        </li>
      </ul>
      <default-page :page="news" :query="query"></default-page>
    </div>
    <default-footer class="mt20"></default-footer>
  </div>
</template>

<script>
import DefaultHeader from "../../../components/default-header";
import DefaultFooter from "../../../components/default-footer";
import DefaultPage from "../../../components/default-page";
import { timeFormatFilter } from "../../../lib/filters/common";

export default {
  components: { DefaultPage, DefaultFooter, DefaultHeader },
  filters: { timeFormatFilter },
  mixins: [],
  head() {
    return {
      title: this.cate.seo_title || this.cate.name || "新闻中心"
    };
  },
  watchQuery: true,
  async asyncData({ query, route, app }) {
    const path = route.path;
    let cate;
    if (query.cate_id)
      cate = await app.$cateService.detail(query.cate_id, "detail", null, true);
    else cate = await app.$cateService.detail(null, "detail", path, true);
    const news = await app.$newsService.list({
      cate_id: cate.id,
      pageSize: 10,
      pageNum: (query && query.p) || 1,
      cache: true
    });
    return {
      query,
      cate,
      news
    };
  }
};
</script>
